<template>
  <div class="app-container">
    <div v-if="routerAlive">
      <div class="header">
        <el-form :inline="true" :model="searchParam" class="demo-form-inline">
          <el-form-item label="">
            <el-input size="mini" class="search-input" v-model="searchParam.keyword" placeholder="请输入课程名称关键字"></el-input>
            <el-button size="mini" class="search-btn" type="primary" @click="search">搜索</el-button>
          </el-form-item>
          <el-form-item label="状态" class="status">
            <el-select size="mini" v-model="searchParam.isShow" @change="search">
              <el-option label="全部" value=""></el-option>
              <el-option label="未发布" value="unpublished"></el-option>
              <el-option label="已发布" value="published"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类">
            <el-cascader size="mini" v-model="selectCidList" :options="categoryOptions" :props="{ checkStrictly: true }" @change="search" clearable></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="edit()">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content">
        <el-table v-loading="dataLoading" :show-header="false" class="custom-table" ref="multipleTable" :data="list" style="width: 100%" @expand-change="expandChange">
          <el-table-column type="expand">
            <template #default="scope">
              <el-card class="box-card">
                <template #header>
                  <div class="clearfix">
                    <span>基础信息</span>
                  </div>
                </template>
                <div class="table-wrapper">
                  <table class="fl-table" style="width: 100%;">
                    <tbody>
                      <tr><td style="width: 120px;">编号：</td><td>{{scope.row.code}}</td></tr>
                      <tr><td>名称：</td><td>{{scope.row.name}}</td></tr>
                      <tr><td>开始时间：</td><td>{{scope.row.startTime}}</td></tr>
                      <tr><td>结束时间：</td><td>{{scope.row.endTime}}</td></tr>
                      <tr><td style="vertical-align: top;">详情：</td><td><div v-html="scope.row.introduction"></div></td></tr>
                    </tbody>
                  </table>
                </div>
              </el-card>
              <el-card style="margin-top: 20px;">
                <template #header>
                  <div class="clearfix">
                    <span>课程章节</span>
                  </div>
                </template>
                <div>
                  <el-table class="custom-table" :data="scope.row.chapterList" :show-header="false" style="width: 100%;">
                    <el-table-column type="expand">
                      <template #default="props">
                        <el-table class="custom-table" :data="props.row.chapterSectionList" :show-header="false" style="width: 100%;">
                          <el-table-column prop="title" label="标题"></el-table-column>
                          <!--                          <el-table-column prop="phrase" label="简介"></el-table-column>-->
                        </el-table>
                      </template>
                    </el-table-column>
                    <el-table-column prop="title" label="标题"></el-table-column>
                    <!--                    <el-table-column prop="phrase" label="简介"></el-table-column>-->
                  </el-table>
                </div>
              </el-card>
            </template>
          </el-table-column>
          <el-table-column>
            <template #default="scope">
              <div class="content-item-warp">
                <a class="image" v-if="scope.row.image && scope.row.image.trim()">
                  <img :src="scope.row.image">
                </a>
                <div class="article-card-bone">
                  <div class="title-wrap">
                    <a class="title">{{scope.row.name}}</a>
                    <span class="label create-time">{{scope.row.createTime}}</span>
                  </div>
                  <div class="abstruct">
                    <div class="status">{{statusMap[scope.row.status]}}</div>
                  </div>
                  <div class="count-wrapper">
                    <ul class="count">
                      <li>学习 {{scope.row.learnNum || 0}}</li>
                      <li>点赞 {{scope.row.likeNum || 0}}</li>
                      <li>收藏 {{scope.row.favoriteNum || 0}}</li>
                      <li>评论 {{scope.row.commentNum || 0}}</li>
                    </ul>
                    <div class="article-action-list">
                      <span class="icon-label" @click="homeworkView(scope.row)">作业审批</span>
                      <!--                      <span class="icon-label" @click="info('敬请期待')">报名记录</span>-->
                      <span class="icon-label" @click="commentView(scope.row)">查看评论</span>
                      <span class="icon-label" @click="edit(scope.row.id)">编辑</span>
                      <span class="icon-label" @click="remove(scope.row)">删除</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <comment-drawer topic-type="lesson" :drawer-close="drawerClose" :show-drawer="drawer" :topic="selectTopic"/>
      <el-drawer custom-class="custom-drawer" v-model="showHomeworkDrawer" direction="rtl" :before-close="drawerHomeworkClose" destroy-on-close>
        <template #title>
          <div style="width: 100%;">
            作业提交记录（共 {{homeworkRecordTotal}} 条提交记录）
          </div>
        </template>
        <el-empty v-if="!(homeworkRecordList && homeworkRecordList.length)"/>
        <div v-else>
          <el-table row-key="id" :data="homeworkRecordList">
            <el-table-column label="头像" width="60">
              <template #default="scope">
                <el-image class="homework-member-avatar" :src="scope.row.member.avatar">
                  <template #error>
                    <div class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </template>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="member.name" label="名字"></el-table-column>
            <el-table-column label="状态">
              <template #default="scope">
                {{homeworkStatusMap[scope.row.status]}}
              </template>
            </el-table-column>
            <el-table-column label="作业内容">
              <template #default="scope">
                <a target="_blank" :href="scope.row.url">下载</a>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button size="mini" @click="approvalPass(scope.row)">通过</el-button>
                <el-button size="mini" @click="approvalReject(scope.row)">驳回</el-button>
              </template>
            </el-table-column>
          </el-table>
          <page :total="homeworkRecordTotal" :current-change="homeworkCurrentChange" :size-change="homeworkSizeChange"></page>
        </div>
      </el-drawer>
      <page :total="total" :current-change="currentChange" :size-change="sizeChange"></page>
    </div>
    <router-view v-if="!routerAlive"/>
  </div>
</template>

<script>
import {ref, watch} from "vue"
import {useRoute} from "vue-router"
import router from "../../../router"
import {findCategoryList, toTree} from "../../../api/learn/category"
import {findList, getHomeworkRecordList, getLessonChapterList, passApproval, rejectApproval} from "../../../api/learn/lesson"
import Page from "../../../components/Page"
import CommentDrawer from "../../comment/commentDrawer";
import {info, success, warning} from "../../../util/tipsUtils";

export default {
  components: {
    CommentDrawer,
    Page
  },
  setup() {
    const route = useRoute()
    const routerAlive = ref(route.fullPath === "/learn/lesson")
    watch(() => route.fullPath, () => {
      routerAlive.value = route.fullPath === "/learn/lesson";
    })
    const list = ref([])
    const total = ref(0)
    const dataLoading = ref(true)
    const selectCidList = ref([])
    const categoryOptions = ref([])
    const lessonIdList = ref([])
    const searchParam = ref({
      keyword: "",
      cid: "",
      isShow: "",
      size: 20,
      current: 1
    })
    const statusMap = {
      unpublished: "未发布",
      published: "已发布",
      deleted: "已删除"
    }
    // 加载分类
    const loadCategory = () => {
      findCategoryList(0, true, (res) => {if (res) { categoryOptions.value = toTree(res);}})
    }
    // 加载列表
    const loadList = () => {
      dataLoading.value = true
      findList(searchParam.value, (res) => {
        dataLoading.value = false
        if (!res) {return;}
        for (const listElement of res.list) {
          listElement.chapterList = [];
        }
        list.value = res.list;
        total.value = res.total;
      })
    }
    loadList();
    loadCategory();
    // 搜索
    const search = () => {
      if (selectCidList.value && selectCidList.value.length > 0) {
        searchParam.value.cid = selectCidList.value[selectCidList.value.length - 1];
      }
      loadList();
    }
    // 选择列表项
    const selectItem = (val) => {
      lessonIdList.value = [];
      if (val && val.length > 0) {
        for (const valElement of val) {
          lessonIdList.value.push(valElement.id);
        }
      }
    }
    // 编辑
    const edit = (id) => {
      routerAlive.value = false
      router.push({path: "/learn/lesson/edit", query: { id : id }})
    }
    const currentChange = (currentPage) => {
      searchParam.value.current = currentPage;
      loadList();
    }
    const sizeChange = (s) => {
      searchParam.value.size = s;
      loadList();
    }
    const expandChange = (row, expandedRows) => {
      // 展开
      if(expandedRows.length>0){
        getLessonChapterList({lessonId: row.id}, (res) => {
          if (res && res.list) {
            list.value[list.value.indexOf(row)].chapterList = res.list
          }
        })
      }
    }
    // 查看评论
    const selectTopic = ref({})
    const drawer = ref(false)
    const drawerClose = (done) => {
      drawer.value = false
      done()
    }
    const commentView = (item) => {
      drawer.value = true
      selectTopic.value = item
    }
    const showHomeworkDrawer = ref(false)
    const drawerHomeworkClose = (done) => {
      showHomeworkDrawer.value = false
      done()
    }
    const homeworkRecordList = ref([])
    const homeworkRecordTotal = ref(0)
    const homeworkParams = ref({
      size: 20,
      current: 1,
      lessonId: ""
    })
    const loadHomeworkList = () => {
      getHomeworkRecordList(homeworkParams.value, res => {
        homeworkRecordList.value = res.list
        homeworkRecordTotal.value = res.total
      })
    }
    const homeworkView = (item) => {
      showHomeworkDrawer.value = true
      homeworkParams.value.lessonId = item.id
      homeworkParams.value.current = 1
      loadHomeworkList()
    }
    const homeworkCurrentChange = (currentPage) => {
      homeworkParams.value.current = currentPage;
      loadHomeworkList();
    }
    const homeworkSizeChange = (s) => {
      homeworkParams.value.size = s;
      loadHomeworkList();
    }
    const approvalReject = (item) => {
      rejectApproval({lessonId: item.lessonId, memberId: item.memberId, signUpId: item.signUpId}, () => {
        warning("已驳回" + item.member.name + "提交的作业")
        loadHomeworkList()
      })
    }
    const approvalPass = (item) => {
      passApproval({lessonId: item.lessonId, memberId: item.memberId, signUpId: item.signUpId}, () => {
        success("已通过" + item.member.name + "提交的作业")
        loadHomeworkList()
      })
    }
    const homeworkStatusMap = {
      waiting_approval: "等待批改",
      pass_approval: "通过",
      reject_approval: "驳回"
    }
    return {
      routerAlive,
      list,
      total,
      searchParam,
      selectCidList,
      categoryOptions,
      lessonIdList,
      search,
      selectItem,
      edit,
      currentChange,
      sizeChange,
      expandChange,
      dataLoading,
      statusMap,
      commentView,
      selectTopic,
      drawer,
      drawerClose,
      info,
      showHomeworkDrawer,
      drawerHomeworkClose,
      homeworkView,
      homeworkRecordList,
      homeworkRecordTotal,
      homeworkCurrentChange,
      homeworkSizeChange,
      approvalReject,
      approvalPass,
      homeworkStatusMap
    };
  }
};
</script>

<style scoped lang="scss">
  .app-container {
    margin: 20px;
    .content {
      .content-item-warp {
        position: relative;
        display: flex;
        .image {
          width: 168px;
          min-width: 168px;
          height: 108px;
          margin-right: 24px;
          position: relative;
          overflow: hidden;
          border-radius: 4px;
          border: 1px solid #e8e8e8;
          cursor: default;
          img {
            width: 100%;
            height: 100%;
            transition: all .5s ease-out .1s;
            -o-object-fit: cover;
            object-fit: cover;
            -o-object-position: center;
            object-position: center;
            &:hover {
              transform: matrix(1.04,0,0,1.04,0,0);
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
            }
          }
        }
        .article-card-bone {
          width: 100%;
          display: flex;
          flex-direction: column;
          min-width: 0;
          .title-wrap {
            display: flex;
            justify-content: space-between;
            margin-top: 0;
            .title {
              font-size: 16px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              line-height: 24px;
              font-weight: 600;
              display: block;
              color: #222;
              cursor: text;
            }
            .create-time {
              color: #999;
              line-height: 24px;
              margin-left: 12px;
              flex-shrink: 0;
            }
          }
          .content {
            word-break: break-word;
            overflow-wrap: break-word;
            margin: 8px 0 4px 0;
            font-size: 12px;
          }
          .abstruct {
            line-height: 20px;
            margin-top: 20px;
            height: 20px;
            display: flex;
            align-items: flex-end;
            .status {
              color: #999;
              border: none;
              background-color: #f5f5f5;
              padding: 0 8px;
              line-height: 20px;
              font-size: 12px;
              border-radius: 2px;
              white-space: nowrap;
              display: inline-block;
              box-sizing: border-box;
              transition: all .3s;
              margin-right: 8px;
            }
            .article-card .byte-tag-simple {
              margin-right: 8px;
            }
            .divider {
              width: 1px;
              height: 12px;
              margin: 4px 10px 4px 4px;
              background: #bfbfbf;
            }
            .icon {
              margin-right: 8px;
              svg {
                vertical-align: bottom;
                &:focus {
                  outline: none;
                }
              }
            }
          }
          .count-wrapper {
            margin-top: 24px;
            display: flex;
            justify-content: space-between;
            .count {
              line-height: 20px;
              position: relative;
              li {
                display: inline-block;
                margin-right: 24px;
                &:after {
                  content: "\ff65";
                  font-size: 20px;
                  margin: 0 8px;
                  line-height: 0;
                  position: absolute;
                  top: 10px;
                  color: #666;
                }
                &:last-child:after {
                  content: ""
                }
              }
            }
            .article-action-list {
              display: flex;
              line-height: 20px;
              flex: 1 0 auto;
              justify-content: flex-end;
              .icon-label {
                cursor: pointer;
                font-size: 14px;
                line-height: 20px;
                display: flex;
                color: #222;
                font-weight: 400;
                margin-left: 24px;
                &:first-child {
                  margin-left: 0;
                }
                &:hover {
                  color: $--color-primary;
                }
              }
            }
          }
        }
      }
    }
    .content {
      .el-table th.is-leaf, .el-table td {
        border: 0!important;
      }
      .el-table th.is-leaf, .el-table td:nth-child(1) {
        text-align: right;
        min-width: 100px;
      }
      .image {
        height: 60px;
        display: inline-block;
      }
      .search-input {
        width: 242px;
      }
      .el-table-column--selection .cell{
        padding-left: 14px;
        padding-right: 14px;
      }
      ::v-deep .el-table tbody tr:hover > td {
        background-color: transparent;
      }
    }
    .homework-member-avatar {
      width: 40px;
      height: 40px;
      i {
        font-size: 40px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
<style lang="scss">
  .el-table.custom-table table tr:last-child {
    td {
      border: 0!important;
    }
  }
  .el-table::before {
    height: 0!important;
  }
</style>
